<!-- ParentComponent.vue -->
<template>
  <div>
    <button v-if="!visible" @click="toggleModal">Open Modal</button>
    <ModalView v-model="visible">
      <!-- <ModalView :visible="visible" @update:visible="visible = $event"> -->
      <!-- 模态框内容 -->
      <p>Hello from Modal!</p>
    </ModalView>
  </div>
</template>

<script setup>
// import { ref } from 'vue';
import { useModal } from '../hooks/useModal.js'
import ModalView from './ModalView.vue'

// 引入并使用 useModal
const { visible, showModal, hideModal, toggleModal } = useModal()

// 也可以直接在模板中使用 modalVisible 来控制模态框的显示
</script>
